<template>
  <div class="tab">
    <router-link class="tab-item" v-for="(item,index) in tabInfo" :key="index" :to="item.path" tag="div">
        <span class="tab-link">{{item.name}}</span>
    </router-link>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tabInfo: [
        { name: "推荐", path: "/recommend" },
        { name: "歌手", path: "/singer" },
        { name: "排行", path: "/rank" },
        { name: "搜索", path: "/search" }
      ]
    };
  }
};
</script>
<style lang="stylus" scoped>
@import "../../common/stylus/variable.styl"
    .tab
        height 44px
        line-height 44px
        font-size $font-size-medium
        display flex
        .tab-item
          flex 1
          text-align center
          .tab-link
            padding-bottom 5px
            color $color-text-l
          &.router-link-active
            .tab-link
              color $color-theme
              border-bottom: 2px solid $color-theme
</style>

